/* component */
import { BaseSelectUserUserItem } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* model */
import { SelectUserComponentUser } from '@src/component/common/BaseSelectUser/model'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type UserListProps = {
  isSearch: boolean;
  isMulti: boolean;
  value: SelectUserComponentUser[];
}

export interface UserListSetupState {
  handlerInputKeywordChange: (keyword: string) => void;
}

export enum UserListEmitEventNameEnum {
  Input = 'input',
}

export type UserListInstance = ComponentInstance & UserListSetupState
export type UserListVM = ComponentRenderProxy<UserListProps> & CommonComponentInstance & UserListInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserUserList,
  emits: [
    UserListEmitEventNameEnum.Input
  ],
  props: {
    isSearch: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    value: {
      type: Array as PropType<SelectUserComponentUser[]>,
      default: () => [],
      required: true
    }
  },
  setup(props: UserListProps, { emit }) {
    
    const handlerInputKeywordChange = (value: string) => {
      emit(UserListEmitEventNameEnum.Input, value)
    }
    
    return {
      handlerInputKeywordChange
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserUserList}>
        
        {this.value.map(user => {
          return (
            <BaseSelectUserUserItem
              value={user}
              key={user.userId}
              is-multi={this.isMulti}
              is-search={this.isSearch}
            />
          )
        })}
        
      </div>
    )
  }
})
